<template>
	<view class="bar_box">
		<view class="tab_bar">
			<view class="tab_bar_item" v-for="(item, index) in tabList" :key="index" @tap="selectTab(index, item.url)">
				<image style="width: 30px; height: 30px;" :src="index == indexActive ? item.imgPL : item.imgUN" />
				<view class="tip_name" :style="{color: index == indexActive ? '#0FAEFF' : '#333'}">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import homeHL from '../static/img/homeHL.png';
import homeUN from '../static/img/home.png';
import myHL from '../static/img/userHL.png';
import myUN from '../static/img/user.png';
import telHL from '../static/img/iconTelHL.png';
import telUN from '../static/img/iconTel.png';
import payHL from '../static/img/iconPayHL.png';
import payUN from '../static/img/iconPay.png';
import listHL from '../static/img/iconListHL.png';
import listUN from '../static/img/iconList.png';

export default {
	props: {
		indexActive: {
			type: String,
			default() {
				return '0';
			}
		},
		userType: {
			type: String,
			default() {
				return ''
			}
		},
		tabList: {
			type: Object
		}
	},
	data() {
		return {
			list: [
				{
					name: 'Home Page',
					imgPL: homeHL,
					imgUN: homeUN,
					url: '../index/index'
				},
				{},
				{
					name: 'Personal Profile',
					imgPL: myHL,
					imgUN: myUN,
					url: '../my/my'
				}
			],
			telObj: {
				name: 'Emergency Mobile',
				imgPL: telHL,
				imgUN: telUN,
				url: '../bottomMent/bottomMent'
			},
			payObj: {
				name: 'Pay',
				imgPL: payHL,
				imgUN: payUN,
				url: '../bottomMent/bottomMent'
			},
			stuListObj: {
				name: 'Student List',
				imgPL: listHL,
				imgUN: listUN,
				url: '../bottomMent/bottomMent'
			}
		};
	},
	methods: {
		selectTab(index, url) {
			let _this = this
			uni.redirectTo({
				url: url
			})
		}
	},
	mounted() {
		let _this = this
		let userType = ''
		uni.getStorage({
			key: 'userInfo',
			success(res) {
				userType = res.data.userType
			}
		})
		console.log(_this.tabList, 12345)
	}
};
</script>

<style scoped>
.bar_box {
	width: 100%;
	height: 75px;
}
.tab_bar {
	border-top: solid 3px #f1f1f1;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px 60px;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
}

.tab_bar_item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: center;
}

.tab_bar_item .tip_name {
	font-size: 14px;
	letter-spacing: 2px;
}
</style>
